<script setup lang="ts">
import {
  chartOption,
  defaultHistoryPagingParams,
} from '../'
import type {
  CustomDialogInstance,
  EnergyPriceInfo,
  EnergyPriceQueryHistoryListParams,
  TableColumn,
} from '@/types'

const props = defineProps<{
  energyId: number
}>()
// ------------------use------------------
// #region
const { withLoading, vLoading } = useDefineLoading({
  destroyNode: true,
})
const [energyHistory, setEnergyHistory] = useState<
  EnergyPriceInfo[]
>([])
const [pagingParams, setPagingParams]
  = useState<EnergyPriceQueryHistoryListParams>({
    ...defaultHistoryPagingParams,
  })
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<EnergyPriceInfo>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '能源',
    prop: 'energyName',
  },
  {
    key: uuid(),
    label: '时间',
    prop: 'time',
  },
  {
    key: uuid(),
    label: '最新价格',
    prop: 'energyPrice',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const showType = ref('表格')
const dialogRef = ref<CustomDialogInstance | null>(null)
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
const computedTime = computed({
  get() {
    return [
      pagingParams.value.startTime,
      pagingParams.value.endTime,
    ]
  },
  set([a, b]: any) {
    pagingParams.value.startTime = a
    pagingParams.value.endTime = b
  },
})
const chartDataset = computed(() => {
  const a = energyHistory.value.map(item => item.time)
  const b = energyHistory.value.map(
    item => item.energyPrice,
  )
  const label
    = energyHistory.value[0]?.energyName ?? '能源'

  return {
    source: [
      ['product', ...a],
      [label, ...b],
    ],
  }
})
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getEnergyHistory() {
  const { data: res } = await withLoading(
    energyPriceApi.queryHistoryList,
  )({
    ...pagingParams.value,
    id: props.energyId,
  })
  setEnergyHistory(res)
}
async function open() {
  dialogRef.value?.open?.()
  setPagingParams({ ...defaultHistoryPagingParams })
  await nextTick()
  getEnergyHistory()
}
async function close() {
  setEnergyHistory([])
  await nextTick()
  dialogRef.value?.close?.()
}
// #endregion
defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="历史价格"
    width="800px"
  >
    <div
      class="align-center margin-bottom-sm -margin-top-sm flex"
    >
      <el-date-picker
        v-model="computedTime"
        type="daterange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="small"
        style="max-width: 300px"
      />
      <SearchButton
        size="small"
        class="margin-left-sm"
        @click="getEnergyHistory"
      />
      <el-radio-group
        v-model="showType"
        size="small"
        class="margin-left-auto"
      >
        <el-radio-button label="表格" value="table" />
        <el-radio-button label="图表" value="line" />
      </el-radio-group>
    </div>
    <div v-loading style="height: 40vh">
      <Transition
        enter-active-class="animate__animated context-menu-animate animate__faster  animate__fadeIn"
      >
        <div v-show="showType === '表格'">
          <view-table
            :columns="columns"
            :data="energyHistory"
            :show-toolbox="false"
          />
        </div>
      </Transition>
      <Transition
        enter-active-class="animate__animated context-menu-animate animate__faster  animate__fadeIn"
      >
        <view-chart-line
          v-show="showType === '图表'"
          :mark-line="[]"
          :option="chartOption"
          :dataset="chartDataset"
          class="height-fill"
        />
      </Transition>
    </div>
  </CustomDialog>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
